<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中医9种体质测试</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8B5A2B',      // 中医棕色
                        secondary: '#4A6741',    // 中药绿色
                        light: '#F5F5DC',        // 米白色背景
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b5a2b' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
            }
        }
    </style>
</head>
<body class="bg-light bg-pattern min-h-screen font-sans">
    <!-- 顶部导航 -->
    <header class="bg-primary text-white shadow-md sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fa fa-leaf mr-2 text-xl"></i>
                <h1 class="text-lg font-bold">中医体质测试</h1>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 开始页面 -->
        <section id="startPage" class="py-6">
            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6">
                <div class="text-center mb-6">
                    <div class="inline-block bg-secondary/10 p-4 rounded-full mb-4">
                        <i class="fa fa-heartbeat text-4xl text-secondary"></i>
                    </div>
                    <h2 class="text-2xl font-bold text-primary mb-3">中医9种体质测试</h2>
                    <p class="text-gray-600 mb-6">了解您的体质，掌握健康密码</p>
                </div>
                
                <div class="space-y-4 mb-8">
                    <div class="flex items-start">
                        <div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
                            <i class="fa fa-check text-primary"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">科学依据</h3>
                            <p class="text-gray-600 text-sm">基于国家标准，科学准确</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
                            <i class="fa fa-list-ul text-primary"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">9种体质</h3>
                            <p class="text-gray-600 text-sm">全面覆盖九种基本体质类型</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start">
                        <div class="bg-primary/10 p-2 rounded-full mr-3 mt-1">
                            <i class="fa fa-lightbulb-o text-primary"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold mb-1">养生建议</h3>
                            <p class="text-gray-600 text-sm">提供个性化的中医养生建议</p>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <button id="startTestBtn" class="w-full bg-primary hover:bg-primary/90 text-white font-semibold py-3 px-6 rounded-lg shadow transition-all duration-300 flex items-center justify-center">
                        <span>开始测试</span>
                        <i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 测试页面 -->
        <section id="testPage" class="py-6 hidden">
            <!-- 进度条 -->
            <div class="max-w-md mx-auto mb-6">
                <div class="flex justify-between text-sm mb-2">
                    <span>进度</span>
                    <span id="progressText">0/60</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5">
                    <div id="progressBar" class="bg-secondary h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
                </div>
            </div>
            
            <!-- 题目卡片 -->
            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md p-6">
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-primary mb-4" id="questionText">加载题目中...</h3>
                    
                    <div class="space-y-3" id="optionsContainer">
                        <!-- 选项将通过JS动态生成 -->
                    </div>
                </div>
                
                <div class="flex justify-between mt-6">
                    <button id="prevBtn" class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-5 rounded-lg shadow transition-all duration-300 hidden">
                        <i class="fa fa-arrow-left mr-2"></i>上一题
                    </button>
                    <div class="flex-grow"></div>
                    <button id="nextBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-5 rounded-lg shadow transition-all duration-300">
                        下一题<i class="fa fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </section>

        <!-- 结果页面 -->
        <section id="resultPage" class="py-6 hidden">
            <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">
                <!-- 结果头部 -->
                <div class="bg-secondary text-white p-6 text-center">
                    <h2 class="text-xl font-bold mb-2">您的体质测试结果</h2>
                    <p class="opacity-90">基于您的回答，我们分析出以下体质特征</p>
                </div>
                
                <!-- 主要体质 -->
                <div class="p-6 border-b border-gray-100">
                    <h3 class="text-lg font-semibold mb-4 text-center">主要体质</h3>
                    <div id="primaryConstitution" class="text-center py-4">
                        <!-- 主要体质将通过JS动态生成 -->
                    </div>
                </div>
                
                <!-- 体质详情 -->
                <div class="p-6 border-b border-gray-100">
                    <h3 class="text-lg font-semibold mb-4">体质分析</h3>
                    <div id="constitutionDetails" class="space-y-4">
                        <!-- 体质详情将通过JS动态生成 -->
                    </div>
                </div>
                
                <!-- 养生建议 -->
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4">养生建议</h3>
                    <div id="healthAdvice" class="space-y-4">
                        <!-- 养生建议将通过JS动态生成 -->
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="p-6 bg-gray-50 flex justify-center">
                    <button id="restartTestBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg shadow transition-all duration-300 mr-3">
                        <i class="fa fa-refresh mr-2"></i>重新测试
                    </button>
                    <button id="shareBtn" class="bg-secondary hover:bg-secondary/90 text-white font-medium py-2 px-6 rounded-lg shadow transition-all duration-300">
                        <i class="fa fa-share-alt mr-2"></i>分享结果
                    </button>
                </div>
            </div>
        </section>
    </main>

    <!-- 分享模态框 -->
    <div id="shareModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-xl max-w-md w-full mx-4 p-6 text-center">
            <div class="text-5xl mb-4 text-primary">
                <i class="fa fa-share-alt"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">分享您的体质结果</h3>
            <p class="text-gray-600 mb-6">将您的中医体质测试结果分享给亲友</p>
            
            <div class="flex justify-center space-x-6 mb-6">
                <button class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-white mb-2">
                        <i class="fa fa-weixin text-xl"></i>
                    </div>
                    <span class="text-sm">微信好友</span>
                </button>
                <button class="flex flex-col items-center">
                    <div class="w-12 h-12 rounded-full bg-green-600 flex items-center justify-center text-white mb-2">
                        <i class="fa fa-weibo text-xl"></i>
                    </div>
                    <span class="text-sm">朋友圈</span>
                </button>
            </div>
            
            <button id="closeShareBtn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-5 rounded-lg transition-all duration-300">
                取消
            </button>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-4 mt-8">
        <div class="container mx-auto px-4 text-center text-sm">
            <p>中医体质测试仅供参考，不能替代专业医疗建议</p>
        </div>
    </footer>

    <script>
        // 中医9种体质测试题目数据
        const questions = [
            // 平和质 (A)
            { id: 1, text: "您精力充沛吗？", type: "A", options: [0, 1, 2, 3, 4] },
            { id: 2, text: "您平时面色红润有光泽吗？", type: "A", options: [0, 1, 2, 3, 4] },
            { id: 3, text: "您睡眠良好吗？", type: "A", options: [0, 1, 2, 3, 4] },
            { id: 4, text: "您的食欲好吗？", type: "A", options: [0, 1, 2, 3, 4] },
            { id: 5, text: "您二便正常吗？", type: "A", options: [0, 1, 2, 3, 4] },
            { id: 6, text: "您的性格开朗吗？", type: "A", options: [0, 1, 2, 3, 4] },
            
            // 阳虚质 (B)
            { id: 7, text: "您手脚发凉吗？", type: "B", options: [0, 1, 2, 3, 4] },
            { id: 8, text: "您胃脘部、背部或腰膝部怕冷吗？", type: "B", options: [0, 1, 2, 3, 4] },
            { id: 9, text: "您吃(喝)凉的东西会感到不舒服吗？", type: "B", options: [0, 1, 2, 3, 4] },
            { id: 10, text: "您穿的衣服比别人多吗？", type: "B", options: [0, 1, 2, 3, 4] },
            { id: 11, text: "您比别人容易受凉吗？", type: "B", options: [0, 1, 2, 3, 4] },
            { id: 12, text: "您冬天更怕冷，夏天不喜欢吹空调吗？", type: "B", options: [0, 1, 2, 3, 4] },
            
            // 阴虚质 (C)
            { id: 13, text: "您感到手脚心发热吗？", type: "C", options: [0, 1, 2, 3, 4] },
            { id: 14, text: "您感觉身体、脸上发热吗？", type: "C", options: [0, 1, 2, 3, 4] },
            { id: 15, text: "您皮肤或口唇干燥吗？", type: "C", options: [0, 1, 2, 3, 4] },
            { id: 16, text: "您口唇的颜色比一般人红吗？", type: "C", options: [0, 1, 2, 3, 4] },
            { id: 17, text: "您容易便秘或大便干燥吗？", type: "C", options: [0, 1, 2, 3, 4] },
            { id: 18, text: "您感到眼睛干涩吗？", type: "C", options: [0, 1, 2, 3, 4] },
            
            // 痰湿质 (D)
            { id: 19, text: "您感到胸闷或腹部胀满吗？", type: "D", options: [0, 1, 2, 3, 4] },
            { id: 20, text: "您感到身体沉重或不爽快吗？", type: "D", options: [0, 1, 2, 3, 4] },
            { id: 21, text: "您腹部肥满松软吗？", type: "D", options: [0, 1, 2, 3, 4] },
            { id: 22, text: "您有额部油脂分泌多的现象吗？", type: "D", options: [0, 1, 2, 3, 4] },
            { id: 23, text: "您上眼睑比别人肿吗？", type: "D", options: [0, 1, 2, 3, 4] },
            { id: 24, text: "您嘴里有黏黏的感觉吗？", type: "D", options: [0, 1, 2, 3, 4] },
            
            // 湿热质 (E)
            { id: 25, text: "您面部或鼻部有油腻感吗？", type: "E", options: [0, 1, 2, 3, 4] },
            { id: 26, text: "您容易生痤疮或疮疖吗？", type: "E", options: [0, 1, 2, 3, 4] },
            { id: 27, text: "您感到口苦或嘴里有异味吗？", type: "E", options: [0, 1, 2, 3, 4] },
            { id: 28, text: "您大便黏滞不爽、有解不尽的感觉吗？", type: "E", options: [0, 1, 2, 3, 4] },
            { id: 29, text: "您小便时尿道有发热感、尿色浓(深)吗？", type: "E", options: [0, 1, 2, 3, 4] },
            { id: 30, text: "您带下色黄(男性阴囊潮湿)吗？", type: "E", options: [0, 1, 2, 3, 4] },
            
            // 气郁质 (F)
            { id: 31, text: "您感到闷闷不乐、情绪低沉吗？", type: "F", options: [0, 1, 2, 3, 4] },
            { id: 32, text: "您容易精神紧张、焦虑不安吗？", type: "F", options: [0, 1, 2, 3, 4] },
            { id: 33, text: "您多愁善感、感情脆弱吗？", type: "F", options: [0, 1, 2, 3, 4] },
            { id: 34, text: "您容易感到害怕或受到惊吓吗？", type: "F", options: [0, 1, 2, 3, 4] },
            { id: 35, text: "您胁肋部或乳房胀痛吗？", type: "F", options: [0, 1, 2, 3, 4] },
            { id: 36, text: "您无缘无故叹气吗？", type: "F", options: [0, 1, 2, 3, 4] },
            
            // 血瘀质 (G)
            { id: 37, text: "您的皮肤在不知不觉中会出现青紫瘀斑吗？", type: "G", options: [0, 1, 2, 3, 4] },
            { id: 38, text: "您的面色晦暗或容易出现褐斑吗？", type: "G", options: [0, 1, 2, 3, 4] },
            { id: 39, text: "您的眼眶经常发黑吗？", type: "G", options: [0, 1, 2, 3, 4] },
            { id: 40, text: "您的舌头上有瘀斑或瘀点吗？", type: "G", options: [0, 1, 2, 3, 4] },
            { id: 41, text: "您容易出现肢体麻木或疼痛吗？", type: "G", options: [0, 1, 2, 3, 4] },
            { id: 42, text: "您的月经量少或颜色暗吗？(女性)", type: "G", options: [0, 1, 2, 3, 4] },
            
            // 气虚质 (H)
            { id: 43, text: "您容易疲乏吗？", type: "H", options: [0, 1, 2, 3, 4] },
            { id: 44, text: "您容易气短(呼吸短促，接不上气)吗？", type: "H", options: [0, 1, 2, 3, 4] },
            { id: 45, text: "您容易心慌吗？", type: "H", options: [0, 1, 2, 3, 4] },
            { id: 46, text: "您容易头晕或站起时晕眩吗？", type: "H", options: [0, 1, 2, 3, 4] },
            { id: 47, text: "您比别人容易感冒吗？", type: "H", options: [0, 1, 2, 3, 4] },
            { id: 48, text: "您喜欢安静、懒得说话吗？", type: "H", options: [0, 1, 2, 3, 4] },
            
            // 特禀质 (I)
            { id: 49, text: "您没有感冒也会打喷嚏吗？", type: "I", options: [0, 1, 2, 3, 4] },
            { id: 50, text: "您没有感冒也会鼻塞、流鼻涕吗？", type: "I", options: [0, 1, 2, 3, 4] },
            { id: 51, text: "您有因季节变化、异味等原因而咳喘的现象吗？", type: "I", options: [0, 1, 2, 3, 4] },
            { id: 52, text: "您容易过敏(药物、食物、气味、花粉等)吗？", type: "I", options: [0, 1, 2, 3, 4] },
            { id: 53, text: "您的皮肤容易起荨麻疹吗？", type: "I", options: [0, 1, 2, 3, 4] },
            { id: 54, text: "您的皮肤因过敏出现过紫癜吗？", type: "I", options: [0, 1, 2, 3, 4] },
            
            // 平和质反向题
            { id: 55, text: "您容易疲劳吗？", type: "A-", options: [0, 1, 2, 3, 4] },
            { id: 56, text: "您容易患感冒吗？", type: "A-", options: [0, 1, 2, 3, 4] },
            { id: 57, text: "您的适应能力强吗？", type: "A-", options: [4, 3, 2, 1, 0] },
            { id: 58, text: "您容易失眠吗？", type: "A-", options: [0, 1, 2, 3, 4] },
            { id: 59, text: "您容易心烦吗？", type: "A-", options: [0, 1, 2, 3, 4] },
            { id: 60, text: "您容易精神紧张吗？", type: "A-", options: [0, 1, 2, 3, 4] }
        ];

        // 体质类型数据
        const constitutions = {
            "A": { 
                name: "平和质", 
                description: "平和质是中医认为的理想体质，表现为身体阴阳平衡，气血充足，精力充沛，面色红润，睡眠良好，食欲正常，性格开朗。这类人群平时较少生病，对环境适应能力强。",
                advice: {
                    diet: "饮食宜多样化，不偏食，注意荤素搭配，营养均衡。可适当食用五谷杂粮、新鲜蔬果、优质蛋白等。",
                    lifestyle: "保持规律作息，劳逸结合，坚持适度运动，如散步、慢跑、太极拳等。保持积极乐观的心态。",
                    health: "平和质人群身体健康，但仍需注意预防疾病，定期体检，避免不良生活习惯。"
                }
            },
            "B": { 
                name: "阳虚质", 
                description: "阳虚质主要表现为阳气不足，畏寒怕冷，手脚不温，喜欢热饮，容易腹泻，精神不振，性格多沉静内向。",
                advice: {
                    diet: "宜多吃温热性食物，如羊肉、鸡肉、韭菜、生姜等，少吃生冷寒凉食物。可适当饮用红糖姜茶。",
                    lifestyle: "注意保暖，尤其是腰腹、背部和脚部。避免长时间处于寒冷环境，适当晒太阳。运动宜选择温和的项目，如快走、太极拳。",
                    health: "可适当艾灸关元、气海、足三里等穴位。若畏寒症状明显，可咨询中医师进行调理。"
                }
            },
            "C": { 
                name: "阴虚质", 
                description: "阴虚质表现为体内阴液不足，易出现口干舌燥，手脚心发热，心烦易怒，失眠多梦，大便干燥，小便短赤等症状。",
                advice: {
                    diet: "宜多吃滋阴润燥的食物，如百合、银耳、梨、黑芝麻、绿豆等，少吃辛辣刺激性食物。",
                    lifestyle: "生活规律，避免熬夜，保持心情舒畅。运动时避免过度出汗，可选择瑜伽、太极拳等柔和运动。",
                    health: "可适当按摩涌泉、太溪等滋阴穴位。若阴虚症状明显，可在中医师指导下服用滋阴中药。"
                }
            },
            "D": { 
                name: "痰湿质", 
                description: "痰湿质多因脾胃功能失调，水湿运化失常所致，表现为身体沉重，体型肥胖，面部油脂多，口中黏腻，容易困倦，大便黏滞。",
                advice: {
                    diet: "宜清淡饮食，少吃肥甘厚味、生冷油腻食物。可多吃薏米、红豆、冬瓜、山药等健脾利湿食物。",
                    lifestyle: "适当增加运动量，如快走、游泳、球类运动等。避免长时间久坐，保持规律作息。",
                    health: "可按摩丰隆、足三里等穴位健脾化痰。若痰湿症状明显，可咨询中医师进行调理。"
                }
            },
            "E": { 
                name: "湿热质", 
                description: "湿热质表现为体内湿热蕴结，常见面部油腻，易生痤疮，口苦口臭，大便黏滞不爽，小便短赤，身重困倦等症状。",
                advice: {
                    diet: "宜清淡饮食，多吃清热利湿的食物，如绿豆、冬瓜、苦瓜、薏米等。避免辛辣刺激、油腻食物及烟酒。",
                    lifestyle: "保持环境干燥通风，避免长时间处于潮湿环境。适当增加运动，促进汗液排出。",
                    health: "可饮用菊花茶、金银花茶等清热饮品。若湿热症状明显，应及时就医调理。"
                }
            },
            "F": { 
                name: "气郁质", 
                description: "气郁质多因情志不畅所致，表现为情绪低落，闷闷不乐，多愁善感，容易紧张焦虑，睡眠较差，胸胁胀痛。",
                advice: {
                    diet: "宜多吃理气解郁的食物，如柑橘、玫瑰花、萝卜、山楂等。避免过量食用冰冷食物。",
                    lifestyle: "多参加社交活动，培养兴趣爱好，适当运动如散步、慢跑、舞蹈等。学会调节情绪，保持心情舒畅。",
                    health: "可按摩太冲、内关等穴位疏肝理气。若情绪问题明显，可寻求心理咨询或中医师帮助。"
                }
            },
            "G": { 
                name: "血瘀质", 
                description: "血瘀质表现为血液运行不畅，常见皮肤瘀斑，面色晦暗，眼眶发黑，口唇紫暗，舌有瘀点，肢体麻木或疼痛。",
                advice: {
                    diet: "宜多吃活血化瘀的食物，如桃仁、红花、黑豆、黑木耳、山楂等。可适当饮用红酒、玫瑰花茶。",
                    lifestyle: "适当增加运动，促进血液循环。保持心情舒畅，避免长期精神紧张。注意保暖，避免受寒。",
                    health: "可按摩血海、三阴交等穴位活血化瘀。若血瘀症状明显，应咨询中医师进行调理。"
                }
            },
            "H": { 
                name: "气虚质", 
                description: "气虚质表现为元气不足，常见疲乏无力，气短懒言，容易出汗，头晕心悸，免疫力低下，容易感冒。",
                advice: {
                    diet: "宜多吃补气健脾的食物，如山药、莲子、大枣、小米、鸡肉等。避免过度节食或饮食不规律。",
                    lifestyle: "生活规律，避免过度劳累。适当进行温和运动，如散步、太极拳、瑜伽等，避免剧烈运动。",
                    health: "可按摩足三里、气海等穴位补气强身。若气虚症状明显，可在中医师指导下服用补气中药。"
                }
            },
            "I": { 
                name: "特禀质", 
                description: "特禀质又称过敏体质，表现为容易对某些物质过敏，如花粉、食物、药物等，常见过敏性鼻炎、哮喘、荨麻疹等疾病。",
                advice: {
                    diet: "饮食宜清淡，避免食用明确引起过敏的食物。可多吃益气固表的食物，如山药、莲子、大枣等。",
                    lifestyle: "避免接触过敏原，保持室内清洁通风。适当运动增强体质，如太极拳、游泳等。",
                    health: "注意记录过敏反应，避免接触过敏原。过敏发作时应及时就医。可在中医师指导下进行调理，改善体质。"
                }
            }
        };

        // 全局变量
        let currentQuestionIndex = 0;
        const answers = {};
        const optionLabels = ["没有(根本不)", "很少(有一点)", "有时(有些)", "经常(相当)", "总是(非常)"];

        // DOM 元素
        const startPage = document.getElementById('startPage');
        const testPage = document.getElementById('testPage');
        const resultPage = document.getElementById('resultPage');
        const startTestBtn = document.getElementById('startTestBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const restartTestBtn = document.getElementById('restartTestBtn');
        const questionText = document.getElementById('questionText');
        const optionsContainer = document.getElementById('optionsContainer');
        const progressBar = document.getElementById('progressBar');
        const progressText = document.getElementById('progressText');
        const shareBtn = document.getElementById('shareBtn');
        const shareModal = document.getElementById('shareModal');
        const closeShareBtn = document.getElementById('closeShareBtn');

        // 初始化事件监听
        function initEventListeners() {
            startTestBtn.addEventListener('click', startTest);
            prevBtn.addEventListener('click', goToPrevQuestion);
            nextBtn.addEventListener('click', goToNextQuestion);
            restartTestBtn.addEventListener('click', restartTest);
            shareBtn.addEventListener('click', () => shareModal.classList.remove('hidden'));
            closeShareBtn.addEventListener('click', () => shareModal.classList.add('hidden'));
            
            // 点击模态框外部关闭
            shareModal.addEventListener('click', (e) => {
                if (e.target === shareModal) shareModal.classList.add('hidden');
            });
        }

        // 开始测试
        function startTest() {
            startPage.classList.add('hidden');
            testPage.classList.remove('hidden');
            currentQuestionIndex = 0;
            renderQuestion(currentQuestionIndex);
            updateProgress();
        }

        // 渲染当前题目
        function renderQuestion(index) {
            const question = questions[index];
            questionText.textContent = `${question.id}. ${question.text}`;
            
            // 清空选项容器
            optionsContainer.innerHTML = '';
            
            // 创建选项
            question.options.forEach((value, optIndex) => {
                const optionDiv = document.createElement('div');
                optionDiv.className = 'relative';
                
                const inputId = `q${question.id}opt${optIndex}`;
                const isSelected = answers[question.id] === value;
                
                optionDiv.innerHTML = `
                    <input type="radio" id="${inputId}" name="q${question.id}" value="${value}" 
                           class="peer sr-only" ${isSelected ? 'checked' : ''}>
                    <label for="${inputId}" class="block w-full p-3 border rounded-lg cursor-pointer 
                        peer-checked:border-primary peer-checked:bg-primary/5 transition-all duration-300">
                        <span class="font-medium">${optionLabels[optIndex]}</span>
                    </label>
                `;
                
                optionsContainer.appendChild(optionDiv);
                
                // 添加选项点击事件
                const input = optionDiv.querySelector('input');
                input.addEventListener('change', () => {
                    answers[question.id] = parseInt(input.value);
                });
            });
            
            // 控制上一题按钮显示
            prevBtn.classList.toggle('hidden', index === 0);
            
            // 控制下一题按钮文本
            nextBtn.innerHTML = index === questions.length - 1 
                ? '查看结果<i class="fa fa-arrow-right ml-2"></i>' 
                : '下一题<i class="fa fa-arrow-right ml-2"></i>';
        }

        // 更新进度
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${currentQuestionIndex + 1}/${questions.length}`;
        }

        // 上一题
        function goToPrevQuestion() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateProgress();
                scrollToTop();
            }
        }

        // 下一题
        function goToNextQuestion() {
            // 检查是否选择了答案
            const questionId = questions[currentQuestionIndex].id;
            if (answers[questionId] === undefined) {
                alert('请选择一个答案后再继续');
                return;
            }
            
            // 如果是最后一题，计算结果
            if (currentQuestionIndex === questions.length - 1) {
                calculateResult();
                testPage.classList.add('hidden');
                resultPage.classList.remove('hidden');
                return;
            }
            
            // 否则，继续下一题
            currentQuestionIndex++;
            renderQuestion(currentQuestionIndex);
            updateProgress();
            scrollToTop();
        }

        // 计算测试结果
        function calculateResult() {
            // 初始化各体质得分
            const scores = {
                "A": 0, "B": 0, "C": 0, "D": 0, 
                "E": 0, "F": 0, "G": 0, "H": 0, "I": 0
            };
            
            // 计算各体质得分
            questions.forEach(question => {
                const answer = answers[question.id];
                
                if (question.type === "A") {
                    scores["A"] += answer;
                } else if (question.type === "A-") {
                    scores["A"] += answer;
                } else if (scores.hasOwnProperty(question.type)) {
                    scores[question.type] += answer;
                }
            });
            
            // 处理平和质得分（反向计分调整）
            scores["A"] = 40 - scores["A"];
            
            // 确定主要体质
            let primaryType = "A"; // 默认平和质
            let maxScore = scores["A"];
            
            Object.keys(scores).forEach(type => {
                if (type !== "A" && scores[type] > maxScore) {
                    maxScore = scores[type];
                    primaryType = type;
                }
            });
            
            // 渲染结果
            renderResult(scores, primaryType);
        }

        // 渲染测试结果
        function renderResult(scores, primaryType) {
            const primaryConstitution = document.getElementById('primaryConstitution');
            const constitutionDetails = document.getElementById('constitutionDetails');
            const healthAdvice = document.getElementById('healthAdvice');
            
            // 渲染主要体质
            const primary = constitutions[primaryType];
            primaryConstitution.innerHTML = `
                <div class="inline-block bg-secondary/10 p-4 rounded-full mb-4">
                    <i class="fa fa-heartbeat text-3xl text-secondary"></i>
                </div>
                <h4 class="text-2xl font-bold text-primary mb-2">${primary.name}</h4>
                <p class="text-gray-600 max-w-md mx-auto">${primary.description}</p>
            `;
            
            // 渲染体质详情
            constitutionDetails.innerHTML = '';
            Object.keys(scores).forEach(type => {
                // 只显示得分较高的体质（大于等于10分）
                if (scores[type] >= 10 || type === primaryType) {
                    const constitution = constitutions[type];
                    const isPrimary = type === primaryType;
                    
                    const detailDiv = document.createElement('div');
                    detailDiv.className = `p-4 rounded-lg ${isPrimary ? 'bg-primary/5 border border-primary/20' : 'bg-gray-50 border border-gray-100'}`;
                    
                    detailDiv.innerHTML = `
                        <div class="flex justify-between items-center mb-2">
                            <h4 class="font-bold ${isPrimary ? 'text-primary' : 'text-gray-700'}">${constitution.name}</h4>
                            <span class="text-sm px-2 py-1 rounded-full ${getScoreColorClass(scores[type])}">
                                得分: ${scores[type]}
                            </span>
                        </div>
                        <p class="text-sm text-gray-600">${constitution.description}</p>
                    `;
                    
                    constitutionDetails.appendChild(detailDiv);
                }
            });
            
            // 渲染养生建议
            healthAdvice.innerHTML = `
                <div class="bg-secondary/5 p-4 rounded-lg border border-secondary/20">
                    <h4 class="font-bold text-secondary mb-3 flex items-center">
                        <i class="fa fa-cutlery mr-2"></i>饮食建议
                    </h4>
                    <p class="text-gray-700">${primary.advice.diet}</p>
                </div>
                
                <div class="bg-secondary/5 p-4 rounded-lg border border-secondary/20">
                    <h4 class="font-bold text-secondary mb-3 flex items-center">
                        <i class="fa fa-bed mr-2"></i>生活方式
                    </h4>
                    <p class="text-gray-700">${primary.advice.lifestyle}</p>
                </div>
                
                <div class="bg-secondary/5 p-4 rounded-lg border border-secondary/20">
                    <h4 class="font-bold text-secondary mb-3 flex items-center">
                        <i class="fa fa-medkit mr-2"></i>健康提示
                    </h4>
                    <p class="text-gray-700">${primary.advice.health}</p>
                </div>
            `;
        }

        // 根据得分获取颜色类
        function getScoreColorClass(score) {
            if (score >= 20) return 'bg-red-100 text-red-800';
            if (score >= 15) return 'bg-orange-100 text-orange-800';
            if (score >= 10) return 'bg-yellow-100 text-yellow-800';
            return 'bg-gray-100 text-gray-800';
        }

        // 重新测试
        function restartTest() {
            resultPage.classList.add('hidden');
            startPage.classList.remove('hidden');
            currentQuestionIndex = 0;
            Object.keys(answers).forEach(key => delete answers[key]);
        }

        // 滚动到顶部
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 初始化应用
        function initApp() {
            initEventListeners();
        }

        // 启动应用
        document.addEventListener('DOMContentLoaded', initApp);
    </script>
</body>
</html>
